<template>
    <div>
        <div class="input__wrapper mt-[40px]">
            <input type="text" placeholder="输入产品型号" class="input__inner" v-model="searchVal">
            <img :src="search.src" alt="" class="w-[14px] h-[14px] translate-x-4" @click="handleSearch">
        </div>
        <div class="bb text-[30px] mt-[40px] pb-[8px]" v-if="tableVisible">
            EVB-ES5030评估板
        </div>
        <div class="bb text-[26px] mt-[12px] pb-[8px]" v-if="tableVisible">
            EVB-ES5030 | ES5030 2.6V~5.5V输入，3A输出小封装同步降压电源转换器 </div>
            <div class="flex pt-[16px]" v-if="tableVisible">
                <div class="img-box  mr-[20px]" >
        <img :src="ES5030.src" alt="" class="w-full h-full">
        </div>
        <div>
            <div class="text-brown text-[16px] cursor-pointer hover:underline">查看评估版详情</div>
            <div class="text-brown flex text-[16px] items-center cursor-pointer hover:underline">用户手册  
                <img :src="pdf.src" alt="" class="w-[14px] h-[14px] ml-[6px]">
            </div>
        </div>
            </div>
       
        <div v-if="!tableVisible">未检索到相应的结果 {{ searchVal }} 请重新输入</div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import search from '@assets/search1.png'
import ES5030  from '@assets/ES5030(1).png'
const searchVal = ref('EVB-ES5030')
import pdf from '@assets/pdf.png'
const tableVisible = ref(true)
const handleSearch = () => {
    if (searchVal.value == 'EVB-ES5030') {
        tableVisible.value = true
    } else {
        tableVisible.value = false
    }
}
</script>
<style lang="scss" scoped>
.input__wrapper {
    width: 660px;
    border-bottom: 1px solid #D8D8D8;
    display: flex;
    align-items: center;
}

.input__inner {
    width: 100%;
    padding: 0;
    outline: none;
    border: none;
    background: none;
    box-sizing: border-box;
    flex-grow: 1;
}

.bb {
    border-bottom: 1px solid #D8D8D8;
}

.img-box {
    width: 288px;
    height: 190px;
    border-radius: 2px;
    border: 1px solid #999999;
    padding: 2px;
    box-sizing: border-box;
    opacity: 1;
}
</style>